<template>
  <div class="page">
    <back-btn></back-btn>
    <!-- <div class="bar" v-if="data.title">
      <div class="title">{{data.title}}</div>
    </div> -->
    <div class="tab_bubble" v-if="data.title">
      <span class="bubble"></span>
      <div class="title">{{data.title}}</div>
    </div>
    <div class="list scroll-wrap">
      <div class="item-wrap">
        <div class="item text" v-html="data.content">
        </div>
        <div class="enrollGuide">
          <ul>
            <li class="item-stripe" v-for="(item,index) in enrollGuideList" :key="index">
              <nuxt-link :to="{path:'enroll-detail',query:{id:item.id,collegeId:collegeId,year:year}}" @click.native="toEnrollDetail(item,index)" :class="currentIndex === index ? 'active':''">{{item.title}}</nuxt-link>
            </li>
          </ul>
          <paginate :total="enrollGuideTotal" :current-page="1" @pagechange="enrollGuidePagechange" :display="size"></paginate>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { api } from '@/utils'
export default {
  layout: 'zhiyuan',
  data () {
    return {
      data: {},
      enrollGuideList: [],
      enrollGuideTotal: 0,
      size: 15,
      pages: 0,
      collegeId: '',
      year: '',
      id: '',
      currentIndex: 0
    }
  },
  methods: {
    toEnrollDetail (index) {
      this.currentIndex = index
    },
    // 分页
    enrollGuidePagechange (currentPage) {
      this.pages = currentPage - 1
      this.getEnrollGuideList()
    },
    getEnrollGuideList () {
      this.$axios.get(api.zhiyuanQueryEnrollGuideList, { params: { collegeId: this.collegeId, year: this.year, size: this.size, page: this.pages } }).then(data => {
        this.enrollGuideList = data.content
        this.enrollGuideTotal = data.totalElements
        for (let i = 0; i < data.content.length; i++) {
          if (data.content[i].id === parseInt(this.id)) {
            this.currentIndex = i
            return this.currentIndex
          }
        }
      })
    },
    getEnrollGuideContent (id) {
      this.$axios.get(api.zhiyuanQueryEnrollGuideContent, {
        params: {
          id: id,
          collegeId: this.collegeId
        }
      }).then(data => {
        this.data = data
      })
    }
  },
  watch: {
    '$route' (to, from) {
      console.log(to)
      this.getEnrollGuideContent(to.query.id)
    }
  },
  mounted () {
    this.id = this.$route.query.id
    this.collegeId = this.$route.query.collegeId
    this.year = this.$route.query.year
    this.getEnrollGuideList()
    this.getEnrollGuideContent(this.id)
  }
}
</script>
<style lang="scss" scoped>
.page {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.list {
  flex: 1;
  // overflow-y: auto;
  .item-wrap {
    display: flex;
    justify-content: space-between;
    .item {
      flex: 1;
    }
    .enrollGuide {
      display: flex;
      flex-direction: column;
      width: 500px;
      li {
        padding: 25px 10px;
        a {
          text-decoration: underline;
          font-size: $size16;
        }
      }
      .active,
      a:hover {
        color: $positive;
      }
      /deep/ .pagination li {
        margin-right: 0;
        > a {
          padding: 0 7px;
        }
      }
    }
  }
}
</style>
